<template>
<div>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <title>依康宝</title>

  <swiper class="home-swiper">

    <swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/kennedy_meadows_0.jpg)"></swiper-slide>
    <swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/yosemite_national_park_0.jpg)"></swiper-slide>
    <swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/mount_rainier.jpg)"></swiper-slide>
    <swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/snoqualmie_pass_0.jpg)"></swiper-slide>
    <swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/three_sisters_wilderness_0.jpg)"></swiper-slide> -->

    <!-- <swiper-slide :style="{backgroundImage: 'url(' + imgUrl + ')'}"></swiper-slide>

    <!-- <div class="" v-for="item in items">
      <swiper-slide :style="{backgroundImage: 'url(https://apitest.yikangbao.com.cn/dpim/webapi/advertisement/get-ad-file/ + ' + item.ad_path + ')'}"></swiper-slide>

    </div> -->

  </swiper>

  <div class="warp">
    <div class="section-header" style="margin: 5px; 0">
      <img src="../assets/yyfw.png" class="my-health-icon">
      <span class="my-health-section-title">医院服务</span>
    </div>
    <ul>
      <router-link to="/hello">
        <li class="my-health-item" @click="clickBgcx"><img src="../assets/bgcx.png" alt="" class="my-health-img-item"></li>
      </router-link>
      <router-link to="/hello">
        <li class="my-health-item" @click="clickYygh"><img src="../assets/yygh.png" alt="" class="my-health-img-item"></li>
      </router-link>
      <router-link to="/hello">
        <li class="my-health-item" @click="clickFycx"><img src="../assets/fycx.png" alt="" class="my-health-img-item"></li>
      </router-link>
      <router-link to="/hello">
        <li class="my-health-item" @click="clickPzfw"><img src="../assets/pzfw.png" alt="" class="my-health-img-item"></li>
      </router-link>
      <router-link to="/hello">
        <li class="my-health-item" @click="clickJtys"><img src="../assets/jtys.png" alt="" class="my-health-img-item"></li>
      </router-link>
    </ul>
  </div>
  <div class="clear">

  </div>
  <div class="warp">
    <div class="section-header" style="margin: 5px; 0">
      <img src="../assets/grda.png" alt="" class="my-health-icon">
      <span class="my-health-section-title">个人档案</sp>
     </div>
     <ul class="">
         <router-link to="/hello">
            <li class="my-health-item" @click="clickJkjl"><img src="../assets/jkjl.png" alt="" class="my-health-img-item"></li>
         </router-link>
         <router-link to="/hello">
            <li class="my-health-item" @click="clickZwgc"><img src="../assets/zwgc.png" alt="" class="my-health-img-item"></li>
          </router-link>
         <router-link to="/hello">
            <li class="my-health-item" @click="clickJbxx"><img src="../assets/jbxx.png" alt="" class="my-health-img-item"></li>
             </router-link>
         <router-link to="/hello">
             <li class="my-health-item" @click="clickJkfx"><img src="../assets/jkfx.png" alt="" class="my-health-img-item"></li>
         </router-link>
     </ul>
</div>
</div>
</div>
</template>

<script>
import {
  swiper,
  swiperSlide
} from 'vue-awesome-swiper'
import {
  host,
  access_token
} from '../option'

export default {
  name: 'myHealth',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      imgUrl: 'https://cn.vuejs.org/images/logo.png',
      items: [],
      imgArr: [],
    }
  },
  mounted: function() {

    var url = host + 'advertisement/get-ad-list?access_token=' + access_token + '&client=person';
    this.$http.get(url).then((response) => {
      // console.log(response.body.records);
      this.items = response.body.records;
      //   for (int i = 0; i < this.items.length; i++) {
      //     console.log(this.items.ad_path);
      //     this.imgArr.push(this.items.ad_path);
      //   }
      //   // console.log(this.items);
      // console.log(this.items.ad_path);
    });
  },
  methods: {
    clickBgcx: function() {},
    clickYygh: function() {},
    clickFycx: function() {},
    clickPzfw: function() {},
    clickJtys: function() {},
    clickJkjl: function() {},
    clickZwgc: function() {},
    clickJbxx: function() {},
    clickJkfx: function() {}
  }
}
</script>

<style scoped>
blockquote,
body,
button,
code,
dd,
div,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

.home-swiper {
  height: 155px;
}

.clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}

.section-header {
  margin: 0;
  text-align: left;
}

.warp {
  /*position: relative;*/
  margin: 0;
}

ul {
  position: relative;
  ;
  margin: 0;
  padding: 0;
  /*width: 100%*/
}

li {
  float: left;
  width: 50%;
  display: block;
}

.my-health-img {
  position: relative;
  // left: 30px;
  width: 55px;
  height: 55px;
}

.my-health-img-list {
  position: relative;
  text-align: center;
  // margin: 0 10px;
  padding: 10px 20px;
}

.my-health-img-label {
  color: gray;
  font-size: 14px;
}

.my-health-img-item {
  width: 100%;
  height: 58px;
}

.my-health-item {
  list-style-type: none;
  height: 58px;
  padding: 0;
}

.my-health-icon {
  width: 22px;
  height: 22px;
  margin-left: 5px;
  padding-top: 5px;
  vertical-align: bottom;
  ;
}

.my-health-blank {
  position: absolute;
  ;
  width: 100%;
  height: 5px;
  background: #EAEAEA;
}

.my-health-section-title {
  color: black;
  font-size: 14px;
}
</style>
